<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen py-6 px-4 bg-gray-50">
    <div class="mx-auto max-w-7xl">
      <!-- 顶部状态导航 -->
      <div class="flex items-center justify-between border-b border-gray-200 py-4">
        <div class="flex space-x-6">
          <button
              v-for="(item, index) in statusNav"
              :key="index"
              :class="[
              'px-4 py-2 text-sm font-medium !rounded-button whitespace-nowrap',
              currentStatus === item.key ? 'text-blue-500' : 'text-gray-600 hover:text-blue-500'
            ]"
              @click="currentStatus = item.key"
          >
            {{ item.label }}
          </button>
        </div>
        <el-button type="primary" class="!rounded-button whitespace-nowrap">发帖</el-button>
      </div>

      <!-- 内容分类标签 -->
      <div class="flex items-center space-x-4 py-4">
        <button
            v-for="(tag, index) in contentTags"
            :key="index"
            :class="[
            'px-4 py-1.5 text-sm !rounded-button whitespace-nowrap',
            currentTag === tag.key ? 'bg-blue-500 text-white' : 'text-gray-600 hover:bg-gray-100'
          ]"
            @click="currentTag = tag.key"
        >
          {{ tag.label }}
        </button>
      </div>

      <!-- 空状态 -->
      <div class="flex flex-col items-center justify-center py-32">
        <el-icon class="text-gray-300 mb-4" :size="64"><DocumentDelete /></el-icon>
        <p class="text-gray-400 text-lg">暂无帖子</p>
      </div>

      <!-- 分页 -->
      <div class="flex items-center justify-between py-4 border-t border-gray-200">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="500"
            layout="prev, pager, next, sizes"
            class="!rounded-button"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { DocumentDelete } from '@element-plus/icons-vue';

const currentStatus = ref('published');
const currentTag = ref('all');
const currentPage = ref(1);
const pageSize = ref(10);

const statusNav = [
  { key: 'published', label: '已发布' },
  { key: 'reviewing', label: '审核中' },
  { key: 'draft', label: '草稿箱' },
  { key: 'scheduled', label: '定时发布' },
  { key: 'comments', label: '评论' }
];

const contentTags = [
  { key: 'all', label: '全部' },
  { key: 'headline', label: '头条' },
  { key: 'review', label: '测评' },
  { key: 'beauty', label: '骗子' },
  { key: 'resell', label: '跟卖' },
  { key: 'wiki', label: '百科' }
];
</script>

<style scoped>
.el-pagination {
  --el-pagination-button-bg-color: transparent;
}

.el-pagination .el-pager li {
  border: 1px solid #e5e7eb;
  margin: 0 2px;
}

.el-pagination .el-pager li.is-active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
  border: 1px solid #e5e7eb;
  margin: 0 2px;
}
</style>

